<template>
  <div class="full-page bg slideIn">
    <header class="header">
      <i class="iconfont icon-zuojiantou-copy" @click="leaveAction()"></i>
      <span class="zhu">忘记密码</span>
    </header>
    <van-form @submit="onSubmit">
      <van-field
        v-model="phone"
        autocomplete="off"
        name="手机号"
        label=""
        placeholder="请输入手机号"
        :rules="[{ pattern, message: getMsg }]"
        left-icon="zanting_huaban"
        @blur="test()"
      >
        <van-icon
          slot="left-icon"
          class-prefix="icon"
          color="#1989fa"
          class="iconfont"
          name="zanting_huaban"
        ></van-icon>
      </van-field>
      <van-field
        type="text"
        name="密码"
        v-model="yan"
        label=""
         autocomplete="off"
        placeholder="请输入验证码"
        left-icon="yanzhengmamima"
        @blur="ma()"
      >
        <van-icon
          slot="left-icon"
          class-prefix="icon"
          color="#1989fa"
          class="iconfont"
          name="yanzhengmamima"
        />
        <template #button>
          <van-button
            size="small"
            type="primary"
            @click="codeTimer"
            ref="eleCode"
            >{{ codeText }}</van-button
          >
        </template>
      </van-field>
      <van-field
        v-model="password"
        autocomplete="off"
        name="新密码"
        label=""
        placeholder="请输入新密码"
        type="password"
        :rules="[{ validator }]"
        left-icon="ziyuanxhdpi"
        @blur="test()"
      >
        <van-icon
          slot="left-icon"
          class-prefix="icon"
          color="#1989fa"
          class="iconfont"
          name="ziyuanxhdpi"
           autocomplete="off"
        ></van-icon>
      </van-field>
      <van-field
        v-model="confirmPwd"
        type="password"
        name="密码"
        label=""
        autocomplete
        placeholder="请确认新密码"
        left-icon="ziyuanxhdpi"
        @blur="test()"
        :rules="[{ validator }]"
      >
        <van-icon
          slot="left-icon"
          class-prefix="icon"
          color="#1989fa"
          class="iconfont"
          name="ziyuanxhdpi"
        />
      </van-field>

      <div id="u157_div" style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >确认</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Form, Field, Button, Toast, Icon, Switch } from "vant";
import { TestPhoneApi, Updatepsw } from "../api/auth";

export default {
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Icon.name]: Icon,
    [Switch.name]: Switch,
  },
  data() {
    return {
      phone: "",
      yan:'',
      password: "",
      confirmPwd: "",
      pattern: /^1\d{10}$/,
      checked: false,
      codeText: "发送验证码",
      msg: "手机号码",
      timer: 60, // 倒计时60s
    };
  },

  methods: {
    leaveAction() {},
    getMsg(value) {
      if (value) {
        Toast("手机11位且为1开头");
        this.phone = "";
      }
    },

    //验证码倒计时
    codeTimer() {
      let _this = this;
      if (this.timer >= 1) {
        this.$refs.eleCode.setAttribute("disabled", "true");

        this.codeText = this.timer + "s 后获取";

        this.$refs.eleCode.style.backgroundColor = "#fce0d2";

        this.timer--;

        if (this.timer == 36) {
          var res = parseInt(Math.random() * (99999 - 10000 + 1) + 10000);
          console.log(res);
          let time = new Date().getTime() - 8 * 60 * 60 * 1000;
          let d = new Date();
          d.setTime(time);

          var millisecond = new Date().getTime();
          var expiresTime = new Date(millisecond + 60 * 1000 * 1);
          document.cookie = `test=${res};path=/;expires=${expiresTime}`;
        }

        setTimeout(function () {
          _this.codeTimer();
        }, 1000);
      } else {
        (this.codeText = "获取验证码"),
          this.$refs.eleCode.removeAttribute("disabled");
        this.$refs.eleCode.style.backgroundColor = "#f16622";
        this.timer = 60;
      }
    },
    leaveAction() {
      this.$router.push("/login");
    },
    async test() {
      if (!this.phone) {
        Toast("手机号不能为空");

        return;
      }
      // 发送是否存在该手机号的请求
      const { data, error } = await TestPhoneApi({
        phone: this.phone,
      });
      console.log(data);
      if (error) {
        Toast(data.message);
        return;
      }
    },
    validator(val) {
      let reg =
        /^(?![0-9]+$)(?![a-z]+$)(?![^\da-z]+$)[^\u4E00-\u9FA5\s]{6,12}$/;
      let res = reg.test(val);
      console.log(res);
      if (res == false) {
        Toast("密码长度为6-12位，而且由数字字母.任意两种组成");
        return;
      }
      if (val !== this.password) {
        Toast("两次密码不一致");
      }
    },
    ma(){
        let cookie = document.cookie;
        console.log(cookie);
        let num=cookie.indexOf('=')
        console.log(num);
        let numzi=cookie.substring(num+1)
        
        if(cookie && this.yan!==numzi){
          Toast('验证码不正确')
        }
    },
    registerAction() {
      this.$router.push("/register");
    },
    forgetAction() {
      this.$router.push("/forgetpsw");
    },
    async onSubmit() {
      const { data, error } = await Updatepsw({
        phone: this.phone,
        password: this.confirmPwd,
      });
      console.log(error);
      if (error) {
        Toast("修改密码失败");
        return;
      }
      Toast("修改成功");

      this.$router.replace("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.full-page {
  justify-content: center;
}
.header {
  height: 1.1733rem;
  display: flex;
  align-items: center;
  justify-content: center;
  //   background: #fff;
  margin-bottom: 4rem;
  position: relative;
  i {
    position: absolute;
    width: 2.6667rem;
    font-size: 0.4267rem;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5333rem;
    left: 0.2667rem;
    .back {
      color: #4a73ff;
      font-size: 0.4267rem;
    }
  }
  .zhu {
    font-size: 0.4267rem;
    font-weight: bold;
    color: #32354a;
  }
}
.van-form {
  width: 8.9333rem;
  margin: 0 auto;
  .van-button--primary {
    background: #fff;
    border: none;
    color: #4a73ff;
    font-size: 0.3733rem;
  }
  .van-button {
    border-radius: 0.1333rem;
    // border: .1067rem solid #a9a9a9;
  }
  .van-field__control.van-cell__value {
    padding-left: 1.3333rem !important;
  }
  .van-cell {
    height: 1.3333rem;
    align-items: center;
    border-radius: 0.2rem;
    box-sizing: border-box;

    margin-bottom: 0.2667rem;
  }
}
.icon-zanting_huaban {
  font-size: 0.5867rem;
}

.icon-a-wode1x {
  font-size: 0.6667rem;
}
.icon-ziyuanxhdpi {
  font-size: 0.6667rem;
}

.van-button--round {
  border-radius: 0px;
  width: 100%;
  border: 2px solid transparent;
}
.van-button--normal {
  font-size: 0.4267rem;
}
.icon-yanzhengmamima {
  font-size: 0.6667rem;
}
</style>